<script setup>
  import {useStore} from "vuex";
  import {onMounted, shallowReactive, shallowRef} from "vue";
  import {RULE} from "../const/index.js";
  import {isNotNull} from "../util/index.js";
  import {ElMessage, ElNotification} from "element-plus";
  import {loginByAccountApi} from "../api/ums/user.js";
  import router from "../router";

  import {getResponseData} from "../util/request.js"
  import {PROJECT_NAME} from "../const/project.js";
  import {useDark, useToggle} from "@vueuse/core";

  const vuex = useStore();

  /* ==============================用户登录 =============================*/

  //
  let loginForm = shallowRef();
  let loginFormData = shallowReactive({username: 'admin', password: '123456789'});
  let loginFormRules = {username: RULE.USERNAME, password: RULE.PASSWORD};

  //
  function login() {
    loginForm.value.validate(valid => {
      if (valid) {
        loginByAccountApi(loginFormData).then(res => {
          let data = getResponseData(res);
          if (isNotNull(data)) {
            ElMessage.success('登录成功！');
            vuex.dispatch('setLoginFlag', true);
            sessionStorage.setItem('token', data['token']);
            sessionStorage.setItem('loginMenus', JSON.stringify(data['menus']));
            sessionStorage.setItem('loginUser', JSON.stringify(data['user']));
            router.push('/Main');
          }
        });
      }
    });
  }

  /* =====================重置表单========================== */
  //
  function resetForm() {
    loginForm.value.resetFields();
  }

  /* =====================忘记密码========================== */
  //

  function forgetPassword() {
    ElNotification.info({
      title: '通知列表',
      message: '员工测试账号: admin / 123456789',
      position: 'top-right',
    });
  }

  /* =====================加载函数========================== */
  //
  onMounted(() => {
    useToggle(useDark());
    sessionStorage.clear();
    vuex.dispatch('setLoginFlag', false);
  });
</script>

<template>
  <section class="login-body">
    <el-card class="login-card" :header="PROJECT_NAME">
      <el-form class="login-form"
               ref="loginForm"
               status-icon
               :model="loginFormData"
               :rules="loginFormRules">
        <el-form-item prop="username" required>
          <el-input v-model="loginFormData['username']"
                    suffix-icon="User"
                    clearable
                    placeholder="输入账号 .."/>
        </el-form-item>
        <el-form-item prop="password" required>
          <el-input v-model="loginFormData['password']"
                    suffix-icon="Lock"
                    clearable
                    placeholder="输入密码 .."
                    show-password/>
        </el-form-item>
        <el-button class="login-btn"
                   type="primary"
                   @click="login">
          用户登录
        </el-button>
        <el-checkbox class="remember-cbx"
                     label="记住账号"
                     size="small"/>
        <el-button class="forget-btn"
                   link
                   size="small"
                   @click="forgetPassword">
          忘记密码
        </el-button>
        <el-button class="reset-btn"
                   link
                   size="small"
                   type="warning" @click="resetForm">
          重置内容
        </el-button>
      </el-form>
    </el-card>
  </section>
</template>

<style scoped lang="scss">
.login-body {
  height: 100vh; // 高度
  background: url("../assets/image/sweet.png") no-repeat; // 背景图片（不平铺）
  background-size: 100% 100%; // 上下 左右
  padding-top: 200px; // 上内边距
  box-sizing: border-box; // 忽略内边距影响

  .login-card {
    margin: auto; // 自居中
    width: 50vh; // 宽度
    opacity: 0.95; // 透明度
  }

  .login-btn {
    width: 100%; // 宽度
    margin: 0 auto 10px; // 外边距
    letter-spacing: 2px; // 字母间距
  }

  .forget-btn, .reset-btn {
    float: right; // 右浮动
    line-height: 18px; // 行高
  }
}
</style>